<template>
  <div class="common-body">
    <div class="ccui-navigation">
      <el-button
        size="mini"
        type="primary-icon-medium"
        icon="icon-ccui-return"
        @click="handleBack"
        >返回</el-button
      >
      <div class="ccui-navigation-divider" />
      <!-- 面包屑 -->
      <el-breadcrumb
        class="ccui-navigation-crumbs-container"
        separator-class="el-icon-arrow-right"
      >
        <el-breadcrumb-item
          :to="{ path: $store.getters.getBreadcrumb('level1').path }"
          >{{ $store.getters.getBreadcrumb("level1").name }}</el-breadcrumb-item
        >
        <el-breadcrumb-item
          :to="{
            path: '/inventoryManagement/storeManagement/storeManagementList'
          }"
          >库存管理</el-breadcrumb-item
        >
        <el-breadcrumb-item
          :to="{
            path: '/inventoryManagement/writeOff/ListAll'
          }"
          >财务出库管理</el-breadcrumb-item
        >
        <el-breadcrumb-item :to="toUrl">{{ pathName }}</el-breadcrumb-item>
        <el-breadcrumb-item>
          <span class="ccui-curr-crumb ccui-ml-10">
            {{ titleName }}
          </span>
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div
      :class="[approvingStatus ? 'detail-box' : 'details-box', 'ccui-clearfix']"
    >
      <div class="detail-info">
        <div
          class="detail-info-el-Label"
          style="z-index: 999; pointer-events: none"
        >
          <el-label :type="approving" v-if="approvingStatus"></el-label>
        </div>
        <div class="detail-info-form-container">
          <el-tabs v-model="activeName" class="el-tabs__customize">
            <!-- 基本信息 -->
            <el-tab-pane label="基本信息" name="first">
              <basicInformation :basicInformation="basicInformation" />
            </el-tab-pane>
            <!-- 清单 -->
            <el-tab-pane label="采购清单" name="two">
              <purchaseList :purchaseList="purchaseList" />
            </el-tab-pane>
            <!-- 附件 -->
            <el-tab-pane label="附件" name="three">
              <fileInfo
                ref="fileInfo"
                v-if="isTrue"
                v-model="fileList"
                state="detail"
              ></fileInfo>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
      <!-- 审批记录 -->
      <div v-if="approvingStatus">
        <approval-read-record :approvalRecordData="approvalRecordData" />
      </div>
    </div>

    <!--  底部导航栏及签名导出  -->
    <!--    出库-->
    <bottomGuide
      v-if="isTrue"
      busiType="115"
      pageType="smpexwarehouse/detailExport"
      :approvalStatus="approving"
      :curPageId="$route.query.id"
      :businessCode="businessCode"
      @handleBack="handleBack"
    />
  </div>
</template>
<script>
import basicInformation from "../components/basicInformation";
import purchaseList from "../components/purchaseList";
import publicComponent from "@/basa/components/public";
import bottomGuide from "@/basa/components/public/bottomGuide";
import { getDataDetails } from "../api";
import { ishasAgentId } from "@/basa/utils";
export default {
  data() {
    return {
      businessCode: "",
      downloadUrl: this.$addUrlPerFix(process.env.VUE_APP_BASE_URL),
      basicInformation: {}, //基本信息
      purchaseList: [], //采购清单
      fileList: [], //附件
      isTrue: false,
      titleName: "",
      activeName: "first",
      toUrl: "",
      pathName: "",
      //审批
      approvalRecordData: [],
      approvingType: {
        1: "approving", // 审批中
        2: "withdrawn", // 已撤回
        3: "approvaled", // 审批通过
        4: "sendback", // 审批退回
        5: "unapproval" // 审批不通过
      },
      approving: "", // 审批状态
      approvingStatus: false // 审批状态展示 ==2不展示其他展示
    };
  },
  components: {
    basicInformation,
    purchaseList,
    fileInfo: publicComponent.uploadInfo,
    approvalReadRecord: publicComponent.approvalRecord,
    // bottomGuide: publicComponent.bottomGuide,
    bottomGuide
  },
  activated() {},
  deactivated() {
    this.isTrue = false;
  },
  created() {
    this.approvingStatus =
      this.$route.query.ifApprovingStatus == 2 ? false : true;
  },
  mounted() {
    let id = this.$route.query.id;
    if (this.$route.query.status && this.$route.query.status == 1) {
      this.pathName = "财务出库台账";
      this.toUrl = "/inventoryManagement/account/all";
    } else {
      this.pathName = "财务出库";
      this.toUrl = "/inventoryManagement/writeOff/ListAll";
    }
    this.getDataDetails({ id: id });
  },
  methods: {
    //返回
    handleBack() {
      this.$router.go(-1);
    },
    //详情
    getDataDetails(data) {
      getDataDetails(data).then(res => {
        if (res.data.code == 0) {
          this.businessCode = res.data.data.exwarehouseBO.exwarehouseCode;
          this.basicInformation = res.data.data.exwarehouseBO;
          this.titleName =
            "查看 " + res.data.data.exwarehouseBO.exwarehouseName;
          if (this.basicInformation.exwarehouseCount) {
            this.basicInformation.exwarehouseCount = Number(
              this.basicInformation.exwarehouseCount
            ).toFixed(3);
          }
          if (this.basicInformation.exwarehouseMoney) {
            this.basicInformation.exwarehouseMoney = Number(
              this.basicInformation.exwarehouseMoney
            ).toFixed(2);
          }
          this.purchaseList = res.data.data.exwarehouseBOList;
          if (this.purchaseList.length > 0) {
            this.purchaseList.forEach(item => {
              if (item.storageCount) {
                item.storageCount = Number(item.storageCount).toFixed(3);
              }
              if (item.unStockCount) {
                item.unStockCount = Number(item.unStockCount).toFixed(3);
              }
              if (item.exwarehouseCount) {
                item.exwarehouseCount = Number(item.exwarehouseCount).toFixed(
                  3
                );
              }
              if (item.exwarehouseMoney) {
                item.exwarehouseMoney = Number(item.exwarehouseMoney).toFixed(
                  2
                );
              }
              if (item.availableStockCount) {
                item.availableStockCount = Number(
                  item.availableStockCount
                ).toFixed(3);
              }
              if (item.unitPriceWithTax) {
                item.unitPriceWithTax = Number(item.unitPriceWithTax).toFixed(
                  2
                );
              }
            });
          }
          this.fileList = res.data.data.exwarehouseFiles;
          this.isTrue = true;
          if (this.fileList.length > 0) {
            this.fileList.forEach(item => {
              if (item.uploadTime) {
                item.createTime = item.uploadTime;
              }
            });
          }
          this.approvalRecordData = res.data.data.approveRecords;
          this.approvalRecordData.forEach(item => {
            if (item.operState === 0) {
              item.icon = "el-icon-time";
              item.color = "#F5A623";
            }
          });
          this.approving =
            this.approvingType[res.data.data.exwarehouseBO.approvalStatus];
          if (this.$route.query.ifApprovingStatus != 2) {
            this.approvingStatus = false;
            this.$nextTick(() => {
              this.approvingStatus = true;
            });
          }
        }
      });
    }
  },
  beforeRouteLeave(to, from, next) {
    for (var key in this.$vnode.parent.parent.componentInstance.cache) {
      delete this.$vnode.parent.parent.componentInstance.cache[
        ishasAgentId(to.path, key)
      ];
    }
    next();
  }
};
</script>
<style lang="scss" scoped>
.details-box {
  width: 100%;
  min-height: calc(100vh - 260px);
  float: left;
  background: #fff;
  position: relative;
  padding: 20px;
  box-sizing: border-box;
  margin-top: 15px;
  margin-bottom: 80px;
}
/deep/ .approval-read-record {
  margin-top: 0px;
}
/deep/.el-tabs__nav-next {
  top: -8px;
}
/deep/ .el-tabs__nav-prev {
  top: -8px;
}
</style>
